<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的文章 - 个人博客</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <i class="fas fa-blog"></i>
                <span>个人博客</span>
            </div>
            <div class="nav-menu">
                <a href="/" class="nav-link">首页</a>
                <a href="/my-posts" class="nav-link active">我的文章</a>
                <a href="#" class="nav-link" onclick="showCreatePost()" id="createPostLink">写文章</a>
                <div class="user-info" id="userInfo" style="display: none;">
                    <span class="welcome-text">欢迎，</span>
                    <span class="username" id="currentUsername"></span>
                </div>
                <a href="#" class="nav-link" onclick="logout()" id="logoutLink">退出</a>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="container">
        <!-- 创建文章表单 -->
        <div id="createPostForm" class="form-container" style="display: none;">
            <h2>写新文章</h2>
            <form onsubmit="createPost(event)">
                <div class="form-group">
                    <label for="postTitle">文章标题</label>
                    <input type="text" id="postTitle" required maxlength="200">
                </div>
                <div class="form-group">
                    <label for="postContent">文章内容</label>
                    <textarea id="postContent" rows="10" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">发布文章</button>
                <button type="button" class="btn btn-secondary" onclick="hideCreatePost()">取消</button>
            </form>
        </div>

        <!-- 编辑文章表单 -->
        <div id="editPostForm" class="form-container" style="display: none;">
            <h2>编辑文章</h2>
            <form onsubmit="updatePost(event)">
                <input type="hidden" id="editPostId">
                <div class="form-group">
                    <label for="editPostTitle">文章标题</label>
                    <input type="text" id="editPostTitle" required maxlength="200">
                </div>
                <div class="form-group">
                    <label for="editPostContent">文章内容</label>
                    <textarea id="editPostContent" rows="10" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">更新文章</button>
                <button type="button" class="btn btn-secondary" onclick="hideEditPost()">取消</button>
            </form>
        </div>

        <!-- 我的文章列表 -->
        <div id="postsList" class="posts-container">
            <h2>我的文章</h2>
            <div id="postsContent"></div>
            <div id="pagination" class="pagination"></div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div id="message" class="message"></div>

    <!-- 加载指示器 -->
    <div id="loading" class="loading" style="display: none;">
        <i class="fas fa-spinner fa-spin"></i>
        <span>加载中...</span>
    </div>

    <script src="/static/js/my-posts.js?v=20250827"></script>
</body>
</html>
